<template>
  <view class="wrapper">
    <view class="container">
      <ZTPickerRange
        label="问题类型"
        :range="problemTypeList"
        :value="ftypeid"
        @change="bindProblemChange"
      />
      <ZTPickerRange
        label="问题大类"
        :range="flargeList"
        :value="flargetypeid"
        @change="bindFlargeChange"
      />
      <ZTPickerRange
        label="问题小类"
        :range="fsmallList"
        :value="fsmalltypeid"
        @change="bindFsmallChange"
      />
      <ZTPickerTime label="事发时间" :date="fcomplaintime" @change="bindDateChange" />
      <ZTLocation label="问题位置" v-model="faddr" @change="handleLocation" />
      <ZTInput label="上报人姓名" v-model="fcomplainid" />
      <ZTInput label="手机号码" type="number" v-model="ftel" :maxlength="11" />
      <ZTTextarea label="上报描述" v-model="fremark" :maxlength="200" />
      <ZTUploader label="现场图片" :src="cover" @change="handleChooseCover" />
    </view>

    <view class="footer">
      <button class="btn" @click="handleSubmit">提交</button>
    </view>
  </view>
</template>

<script>
import { appletUpload, appletWtsb, getFlarge, getFsmall } from '@/api/index';
import ZTPickerRange from '@/components/ZTPickerRange/index.vue';
import ZTPickerTime from '@/components/ZTPickerTime/index.vue';
import ZTLocation from '@/components/ZTLocation/index.vue';
import ZTInput from '@/components/ZTInput/index.vue';
import ZTTextarea from '@/components/ZTTextarea/index.vue';
import ZTUploader from '@/components/ZTUploader/index.vue';
export default {
  components: {
    ZTPickerRange,
    ZTPickerTime,
    ZTLocation,
    ZTInput,
    ZTTextarea,
    ZTUploader,
  },

  data() {
    const currentDate = this.getDate();
    return {
      problemTypeList: [
        { label: '事件', value: 1 },
        { label: '部件', value: 2 },
      ],
      flargeList: [],
      fsmallList: [],
      ftypeid: 1, // 问题类型
      flargetypeid: 1, // 问题大类
      fsmalltypeid: 1, // 问题小类
      fcomplaintime: currentDate,
      faddr: '',
      fcomplainid: '',
      flongitude: '',
      flatitude: '',
      ftel: '',
      fremark: '',
      cover: '',
    };
  },

  watch: {
    ftypeid: {
      handler: function (nval) {
        this.getFlargeList(nval);
      },
      immediate: true,
    },
    flargetypeid: {
      handler: function (nval) {
        this.getFsmallList(nval);
      },
      immediate: true,
    },
  },

  methods: {
    getFlargeList(ftype) {
      const params = { ftype };
      getFlarge(params).then((res) => {
        this.flargeList = (res.data || []).map((item) => ({
          label: item.FNAME,
          value: item.ID,
        }));
        this.flargetypeid = this.flargeList[0]?.value;
      });
    },

    getFsmallList(pid) {
      const params = { pid };
      getFsmall(params).then((res) => {
        this.fsmallList = (res.data || []).map((item) => ({
          label: item.FNAME,
          value: item.ID,
        }));
        this.fsmalltypeid = this.fsmallList[0]?.value;
      });
    },

    bindProblemChange(e) {
      console.log('问题类型: ', e);
      this.ftypeid = e;
      this.getFlargeList(e);
    },

    bindFlargeChange(e) {
      console.log('问题大类: ', e);
      this.flargetypeid = e;
      this.getFsmallList(e);
    },

    bindFsmallChange(e) {
      console.log('问题小类: ', e);
      this.fsmalltypeid = e;
    },

    bindDateChange(e) {
      console.log('问题小类: ', e);
      this.fcomplaintime = e;
    },

    handleLocation(e) {
      this.faddr = e.address;
      this.flongitude = e.longitude;
      this.flatitude = e.latitude;
    },

    handleChooseCover(e) {
      this.cover = e;
      appletUpload(e).then(() => {});
    },

    getDate() {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day} 00:00:00`;
    },

    handleSubmit() {
      const params = {
        ftypeid: this.ftypeid, // 问题类型 1-事件，2-部件
        flargetypeid: this.flargetypeid, // 事部件大类id
        fsmalltypeid: this.fsmalltypeid, // 事部件小类id
        fcomplaintime: this.fcomplaintime, // 上报时间
        fcomplainid: this.fcomplainid, // 上报人姓名
        ftel: this.ftel, // 上报人电话
        faddr: this.faddr, // 问题位置
        flongitude: this.flongitude, // 经度
        flatitude: this.flatitude, // 纬度
        fremark: this.fremark, // 上报描述
        fvoice: '', // 录音
        fhspic: '', // 图片
      };

      appletWtsb(params).then((res) => {
        if (res.code === 0) {
          uni.showToast({ title: res.msg, icon: 'none' });
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/reportList/index',
            });
          }, 2000);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/uni.less';
.wrapper {
  padding-bottom: calc(30rpx + 100rpx + 30rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
</style>
